<template>
  <el-popover
    ref="popoverRef"
    :virtual-ref="contextMenu"
    :visible="contextVisible"
    virtual-triggering
    placement="bottom-start"
    :show-arrow="false"
    :popper-options="contextState.options"
    popper-class="contextMenu"
  >
    <component :is="component" :data="contextData" />
  </el-popover>
</template>

<script setup>
import { computed, defineAsyncComponent, ref } from 'vue';
import {
  contextMenu,
  contextVisible,
  contextState,
  contextData,
} from '../service/vueService';

const popoverRef = ref();
const nodeMenu = defineAsyncComponent(() => import('./nodeMenu.vue'));
const edgeMenu = defineAsyncComponent(() => import('./edgeMenu.vue'));
const component = computed(() =>
  contextState.type === 'node' ? nodeMenu : edgeMenu,
);
</script>
